<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="todo-list-example">
		  <form v-on:submit.prevent="addNewTodo">
		    <label for="new-todo">Add a todo</label>
		    <input
		      v-model="newTodoText"
		      id="new-todo"
		      placeholder="E.g. Feed the cat"
		    >
		    <button>Add</button>
		  </form>
		  <ul>
		    <!-- <li
		      is="todo-item"
		      v-for="(todo, index) in todos"
		      v-bind:key="todo.id"
		      v-bind:title="todo.title"
		      v-on:remove="todos.splice(index, 1)"
		    ></li> -->
			<todo-item2
			v-for="(todo, index) in todos"
			v-bind:key="todo.id"
			v-bind:title="todo.title"
			v-on:remove="todos.splice(index, 1)"
			></todo-item>
		  </ul>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript">
		
		Vue.component('todo-item2', {
		  template: '\
		    <li>\
		      {{ title }}\
		      <button v-on:click="$emit(\'remove\')">Remove</button>\
		    </li>\
		  ',
		  props: ['title']
		})
		
		new Vue({
		  el: '#todo-list-example',
		  data: {
		    newTodoText: '',
		    todos: [
		      {
		        id: 1,
		        title: 'Do the dishes',
		      },
		      {
		        id: 2,
		        title: 'Take out the trash',
		      },
		      {
		        id: 3,
		        title: 'Mow the lawn'
		      }
		    ],
		    nextTodoId: 4
		  },
		  methods: {
		    addNewTodo: function () {
		      this.todos.push({
		        id: this.nextTodoId++,
		        title: this.newTodoText
		      })
		      this.newTodoText = ''
		    }
		  }
		})
	</script>
</html>
